<template>
	<v-content ref="content" single>
		<v-header title="修改资料" back>
			<template #right>
				<div class="save" @click="submit">保存</div>
			</template>
		</v-header>
		<!-- <div class="img padding">
			<image src="/static/image/mine/avatar.png"></image>
			<div class="camera">
				<image src="/static/image/mine/camera.png"></image>
			</div>
		</div> -->
		<v-upload class="upload padding" ref="vUploadRef" :max="1"></v-upload>
		<div class="form-item no-border">
			<div class="label">昵称</div>
			<div class="value">
				<input v-model="formData.nickName" placeholder="昵称" class="input" />
			</div>
		</div>
		<div class="form-item no-border">
			<div class="label">性别</div>
			<div class="value sex">
				<div class="sex-item" :class="{ active: sex == '2' }" @click="changeSex('2')">
					<div class="icon">
						<div class="circle"></div>
					</div>
					女
				</div>
				<div class="sex-item" :class="{ active: sex == '1' }" @click="changeSex('1')">
					<div class="icon">
						<div class="circle"></div>
					</div>
					男
				</div>
			</div>
		</div>
		<div class="form-item no-border textarea">
			<div class="label">简介</div>
			<div class="value">
				<textarea v-model="formData.remark" placeholder="请输入简介..." class="textarea"></textarea>
			</div>
		</div>

		<!-- <input v-model="formData.birthday" placeholder="生日" class="form-item" /> -->
		<!-- <uni-datetime-picker
			type="date"
			:clear-icon="false"
			v-model="formData.birthday"
			@maskClick="maskClick"
			class="form-item"
		/> -->
		<!-- <input v-model="formData.city" placeholder="山东省 潍坊市" class="form-item" /> -->
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			sex: "2",
			formData: {
				nickName: "",
				birthday: "",
				city: "",
				remark: "",
			},
			getUserInfo: "",
			title: "查看资料",
		}
	},
	mounted() {
		this.$refs.vUploadRef.setFileList([
			{
				url: this.getUserInfo.avatar,
			},
		])
	},
	methods: {
		init() {
			if (this.query.type == 0) {
				this.title = "编辑资料"
			}
			this.getData()
		},
		changeSex(type) {
			this.sex = type
		},
		getData() {
			this.getUserInfo = this.$store.state.user.userInfo
			this.formData.nickName = this.getUserInfo.nickName
			this.formData.birthday = this.getUserInfo.birthday
			this.formData.remark = this.getUserInfo.remark
			this.sex = this.getUserInfo.gender
		},
		maskClick(e) {
			console.log("maskClick事件:", e)
		},
		onchange(e) {
			const value = e.detail.value
			console.log(value)
		},
		onnodeclick(node) {
			console.log(node)
		},

		async submit() {
			const [avatar] = this.$refs.vUploadRef.getFileList()
			if (!avatar) {
				uni.showToast({
					title: "请上传头像",
					icon: "none",
				})
				return
			}
			await this.$axios.post("/api/member/member/edit", {
				id: this.getUserInfo.id,
				nickName: this.formData.nickName,
				avatar: avatar.url || "",
				gender: this.sex,
				birthday: this.formData.birthday,
				remark: this.formData.remark,
			})

			uni.showToast({
				title: "修改成功",
				icon: "success",
			})
			this.$store.dispatch("reloadUserInfo")
			setTimeout(() => {
				this.toPage(-1)
			}, 1500)
		},
	},
	components: {},
}
</script>
<style lang="scss" scoped>
.save {
	font-size: 26rpx;
	color: #555;
	padding-inline: 30rpx;
}

.upload {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 50rpx;
	padding-bottom: 30rpx;
}

.form-item {
	--height: 90rpx;
	&.textarea {
		height: auto;
		align-items: flex-start;
		margin-top: 30rpx;
		.value {
			.textarea {
				border: 0;
				font-size: 24rpx;
			}
		}
	}
	.label {
		width: 100rpx;
		font-size: 26rpx;
		color: #000;
	}
	.value {
		.input {
			background: transparent;
		}
		&.sex {
			--color: #a3a3a3;

			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #a3a3a3;
			gap: 30rpx;
			.sex-item {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 28rpx;
				transition: all 0.3s;
				&.active {
					color: #476bff;
					--color: #fff;
					.icon {
						background: #476bff;
					}
				}
				.icon {
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background: #f5f5f5;
					position: relative;
					transition: all 0.3s;
				}
				.circle {
					border-radius: 50%;
					border: 1px solid var(--color);
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					margin: auto;
					transition: all 0.3s;
					&::before,
					&::after {
						content: "";
						transition: all 0.3s;
						position: absolute;
					}
				}
				&:first-child {
					.circle {
						width: 20rpx;
						height: 20rpx;
						top: -8rpx;
						right: -8rpx;
						&::before,
						&::after {
							background: var(--color);
							width: 14rpx;
							height: 1px;
							top: 18rpx;
							left: -10rpx;
						}
						&::before {
							transform: rotate(45deg);
						}
						&::after {
							transform: rotate(-45deg);
						}
					}
				}
				&:last-child {
					.circle {
						width: 20rpx;
						height: 20rpx;
						top: 8rpx;
						left: -8rpx;
						&::before {
							background: var(--color);
							width: 10rpx;
							height: 1px;
							top: -4rpx;
							right: -7rpx;
						}
						&::before {
							transform: rotate(-45deg);
						}
						&::after {
							width: 8rpx;
							height: 8rpx;
							border-top: 1px solid var(--color);
							border-right: 1px solid var(--color);
							top: -8rpx;
							right: -7rpx;
						}
					}
				}
			}
		}
	}
}
</style>
